<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="logo" @click="goToWelcome">
          <img src="@/assets/imgs/logo2.png" alt="">
          <span>数据分析·管理系统</span>
        </div>
        <el-button type="danger" @click="outLogin">退出登录</el-button>
      </el-header>
      <el-container>   
          <el-aside :width="isCollapse ? '60px' : '150px'">
            <el-menu 
              background-color="#304156"
              text-color="rgba(255,255,255,0.5)"
              active-text-color="rgba(255,255,255,1)"
              ref="elMenu"
              default-active=""
              :collapse="isCollapse"  
              :collapse-transition="false" 
              router
            >
              <el-menu-item index="/potentialClients">
                <i class="el-icon-coin"></i>
                <span slot="title">意向客户</span>
              </el-menu-item>
              <el-menu-item index="/addCustomer">
                <i class="el-icon-user"></i>
                <span slot="title">添加客户</span>
              </el-menu-item>
              <el-menu-item index="/dataAnalysis">
                <i class="el-icon-data-analysis"></i>
                <span slot="title">数据分析</span>
              </el-menu-item>
            </el-menu>
            <div class="show-hide" @click="isShow">
              <i :class="!isCollapse ?'el-icon-d-arrow-left' : 'el-icon-d-arrow-right' "></i>
            </div>
          </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
 
  name:"Home",
  data() {
    return {
      isCollapse:false
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   console.log(to)
  //   if(to.path == "/home"){
  //     if(window.sessionStorage.getItem('vuex')){
  //       next()
  //     }else{
  //       next({
  //         path:"/login"
  //       })
  //     }
  //   }
  //   next()
  // },
  created() {
    window.onkeyup = null
  },
  methods:{
    outLogin(){
      this.$store.dispatch('set_tonken',null)
      window.sessionStorage.removeItem("vuex")
      this.$router.push("/")
    },
    isShow(){
      this.isCollapse = !this.isCollapse
    },
    goToWelcome(){
      this.$router.push("/welcome")
      var lis = this.$refs.elMenu.$el.getElementsByTagName('li')
      for(var i = 0 ; i < lis.length ; i++){
        lis[i].classList.remove("is-active")
        lis[i].style.color = "rgba(255,255,255,0.5)"
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .home{
    height: 100%;
  }
  .el-container{
    height: 100%;
    .el-header{
      width: 100%;
      height: 100px;
      background: #17253F;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo{
        display: flex;
        align-items: center;
        color: rgba(255,255,255,0.4);
        font-size: 22px;
        height: 100%;
        span{
          margin-left: 20px;
        }
        img{
          height: 60%;
        }
      }
    }
    .el-container{
      height: calc(100% - 100px);
      .el-aside{
        background: #304156;
        position: relative;
        .el-menu{
          border-right:none
        }
        .show-hide{
          position: absolute;
          width: 30px;
          height: 80px;
          top: calc(50% - 40px);
          right: 0px;
          background: rgba(0,0,0,0.2);
          line-height: 80px;
          overflow: hidden;
          font-size: 30px;
          text-align: center;
          color: white;
        }
      }
    }
  }

</style>